<template>
  <div class="home">
    <div class="flex container">
	  <div :class="out?'assadeOut':'assadeIn'" class="newAssade" :style="{background:sideTheme}">
		  <div>
			  <div class="logo" v-if="sidebarLogo">
			  	 <!-- <img v-if="logo" :src="$baseUrl+logo" > -->
				 <img  src="@/assets/img/tb.png" >
			  </div>
			  <!-- <el-aside> -->
				  <el-menu :collapse="!out" :default-active="currentMenu" 
				  	unique-opened	
				   :background-color="sideTheme"  
					text-color="#fff" 
					:active-text-color="asdTextColor"
					>
							<el-submenu  :index="++i+''"  v-if="el.is_show==1"  v-for="(el,i) in menuList" :key="i">
						   <template slot="title" > 
							<i class="iconfont " 
							  :class="el.icon" 
							  style="color: #fff;"
							  >
							</i>  
								<span >
									{{el.title}}
								</span>
							</template>
						   <el-menu-item-group >
							   <el-menu-item v-if="item.is_show==1"
									v-for="(item,index) in el.children" 
									:key="index" 
									:index="item.url" 
									@click="goPath(item,i)"
								> 
									<span>{{item.title}}</span> 
							   </el-menu-item>
						   </el-menu-item-group>
						   
					   </el-submenu>
					 
				  </el-menu>
			  <!-- </el-aside> -->
			  
		  </div>
	  </div>
	
		  <div class="main" >
			  <!-- <floatAssade :childList="childList" 
				@toChildPath="toChildPath"
				:currentMenu="currentMenu"
				:out="out"
				:top="top"
				@childMouseLeave="childMouseLeave"
			  >
			  </floatAssade> -->
			  <navBar :levelList="levelList" @changeAsdBar="changeAsdBar"></navBar>
			  <div class="container">
				 <div :class="fixedHeader?'fixed-header':''" v-if="tagsView">
					 <tagView :currentPath="currentMenu" :tags="tags" @toChildPath="toChildPath"></tagView>
				 </div>
				  <div style="height: 40px;" v-if="fixedHeader && tags.length && tagsView"></div>
				  <div class="app-main">
					  <router-view/>
				  </div>
			  </div>
		  </div>
	   
    </div>
  </div>
</template>


<script>
import navBar from './child/Navbar.vue'
import tagView from './child/tagView.vue'
import floatAssade from './child/floatAssade.vue'
import menuList from './child/menu.js'
export default {
  data() {
    return {
		top:'70px',
		childList:[],
		out:true,
		tags:[],
	    levelList:[
		  {
			  title:'数据管理'
		  },
		  {
			  title:'数据统计'
		  }
	  ],
		currentMenu: "/deskTop/home",
		menuList:[]
    };
  },
  components:{
	  navBar,tagView,floatAssade
  },
  computed:{
	  asdTextColor:{
		  get(){
		  	 return this.$store.state.settings.asdTextColor
		  }
	  },
	  sideTheme:{
		  get(){
		  	 return this.$store.state.settings.sideTheme
		  }
	  },
	  sidebarLogo:{
		  get(){
			  return this.$store.state.settings.sidebarLogo
		  }
	  },
	  fixedHeader:{
		 get(){
		 	return this.$store.state.settings.fixedHeader
		 } 
	  },
	  tagsView:{
	  		 get(){
	  		 	return this.$store.state.settings.tagsView
	  		 } 
	  }
  },
  created() {
	// this.menuList = menuList.menuList
	this.logo = sessionStorage.getItem('logo')
	let mlist = sessionStorage.getItem('menuList')
	if(mlist){
		this.menuList = JSON.parse(mlist)
	}else{
		this.$message.error('请先登录')
		this.$router.push('/')
	}
  },
  watch: {
     $route(to, from) {
		var ele = document.getElementsByClassName('app-main')
		 this.$utils.addClass(ele[0],'fade-enter')
		 setTimeout(()=>{
			 this.$utils.removeClass(ele[0],'fade-enter')
		 },1000)
         this.currentMenu = to.path;
     }
  },
  mounted() {
    this.getUrl()
	
  },
  methods: {
	  mouseenter(e,i){
		  this.top = (e.screenY-120) + 'px'
		  this.childList = this.menuList[i-1].children
		  for(let item of this.childList){
			  item.parent = this.menuList[i-1].title
		  }
	  },
	  childMouseLeave(){
		 this.childList = [] 
	  },
	  changeAsdBar(out){
		this.out = out
	  },
	  getUrl(){
	      let _this = this;
	      let currentUrl = window.location.href;
	      _this.currentMenu = currentUrl.split('#')[1];
	  },
	  goUrl(item){
		 this.levelList[0].title = '首页'
		  this.levelList[1].title = item.title
		  let bool =this.tags.some((el,i)=>{
			  return el.title == item.title
		  })
		  item.parent = '首页'
		  if(!bool) this.tags.push(item)
		 this.$router.push({path:item.url})
	  },
	  goPath(item,i){
		  this.levelList[0].title = this.menuList[i-1].title
		  this.levelList[1].title = item.title
		  let bool =this.tags.some((el,i)=>{
			  return el.title == item.title
		  })
		  item.parent =  this.menuList[i-1].title
		  if(!bool) this.tags.push(item)
	      this.$router.push({path:item.url})
	  },
	  toChildPath(item){
		 this.levelList[0].title = item.parent
		 this.levelList[1].title = item.title
		 let bool =this.tags.some((el,i)=>{
		 	 return el.title == item.title
		 })
		 if(!bool) this.tags.push(item)
		  this.$router.push({path:item.url})
	  },
  }
};
</script>
<style lang="scss">
	.app-main{
		position: relative;
	}
	.fade-enter {
	 animation:mymove 3s linear;
	}
	@keyframes mymove
	{
	  0% {left:0;opacity:1}
	  20% {left:20px;opacity:0}
	  50% {left:-40px;opacity:0.3}
	  70% {left:-30px;opacity:0.8}
	  100% {left:0;opacity:1}
	}
	.fixed-header{
		position: fixed;top: 50px;z-index: 5;
	}
	.newAssade{
		overflow: hidden;
		min-height: 100vh;
		position: relative;
		z-index: 10;
		// width: 200px;
		.el-menu-item-group__title{
		  padding: 0 !important;
		}
		.logo{
			text-align: center;
			padding: 15px 0 5px;
			img{
				height: 50px;
				
				border-radius: 10px;
			}
		}
	}
	.assadeOut{
		width: 210px;
		transition: all .4s;
	}
	.assadeIn{
		width: 50px;
		transition: all .4s;
	}
	.el-menu{
		border-right: none;
	}
	.main{
		   flex: 1;
		   background-color: #f5f5f5;
		   overflow-x: scroll;
		   .container{
			   padding: 0px 20px;
		   }
		   
	   }
	

</style>
